<template>
  <nav id="musicInfoMenu">
    <ul id="musicMenuList">
      <li id="discuss" class="selectList"><router-link to="discuss" >讨论</router-link></li>
      <li id="singerInfo"><router-link to="singerInfo" >歌手简介</router-link></li>
    </ul>
    <div id="underLineSlide"></div>
  </nav>
</template>

<script>

  import discuss from './discuss'

  export default {
    name: 'musicMenu',
    // watch:{
    //   $route(to,from){
    //     console.log(to.path);
    //   }
    // },
    mounted() {
      let item = document.querySelectorAll('nav ul li')
      let marker = document.querySelector('#underLineSlide')

      function getValue(url){
        //获取最后一个/的位置
        let site = url.lastIndexOf("\/");
        //截取最后一个/后的值
        return url.substring(site + 1, url.length);
      }
      let discuss = document.getElementById('discuss')
      let singerInfo = document.getElementById('singerInfo')
      let album = document.getElementById('_album')
      let lastRouter = getValue(window.location.pathname)

      if(lastRouter === 'discuss'){
        marker.style.left= discuss.offsetLeft + 'px'
        marker.style.width= discuss.offsetWidth + 'px'
      }
      if(lastRouter === 'singerInfo'){
        marker.style.left= singerInfo.offsetLeft + 'px'
        marker.style.width= singerInfo.offsetWidth + 'px'
      }
      if(lastRouter === 'album'){
        marker.style.left= album.offsetLeft + 'px'
        marker.style.width= album.offsetWidth + 'px'
      }

      function clickMenu(e){
        marker.style.left= e.offsetLeft + 'px'
        marker.style.width= e.offsetWidth + 'px'
      }

      item.forEach(link => {
        link.addEventListener('click',data =>{
          clickMenu(data.target)
        })
      })
    },
  }
</script>

<style lang="less" scoped>
  #musicInfoMenu{
    width: 100%;
    /*height: 30px;*/
    /*background-color: red;*/
    margin: 30px 0 20px 0;
    /*position: relative;*/
    position: relative;
  }
  #musicInfoMenu ul{
    display: flex;
    bottom: 0;
    position: relative;
    /*letter-spacing: 20px;*/
    line-height: 20px;
  }
  #musicInfoMenu li{
    margin-right: 20px;
    font-size: 20px;
    font-weight: 900;
    cursor: default;
    /*background-color: red;*/
    /*letter-spacing: 20px;*/
  }
  #underLineSlide{
    width: 0;
    height: 3px;
    bottom: -7px;
    position: absolute;
    transition: all 0.2s ease-out;
  }
</style>
